<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="duty">
            <el-button class="addBtn" type="primary" @click="addBtn">新增角色</el-button>
            <el-table
              :data="tableData"
              border
              stripe
              align="center"
              style="width: 100%"
              highlight-current-row
            >
              <el-table-column
                prop="id"
                label="序号"
                width="180"
                align="center"
                type="index"
              />
              <el-table-column
                prop="name"
                label="角色"
                width="180"
                align="center"
              />
              <el-table-column
                prop="description"
                label="描述"
                align="center"
              />
              <el-table-column
                label="操作"
                align="center"
              >
                <template v-slot="{row}">
                  <el-button type="success">分配权限</el-button>
                  <el-button type="primary" @click="editBtn(row.id)">编辑</el-button>
                  <el-button type="danger" @click="delBtn(row.id)">删除</el-button>
                </template>

              </el-table-column>
            </el-table>
            <el-pagination
              layout="prev, pager, next"
              :page-size="page.pagesize"
              :total="page.total"
              :current-page="page.page"
              class="pagination"
              @current-change="handleCurrentChange"
            />
            <add-role ref="addRoleFef" :show-dialog.sync="dialogFormVisible" @getRoleList="getRoleList" />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              :closable="closable"
              show-icon
            />
            <el-form ref="form" :model="formData" label-width="80px">
              <el-form-item label="公司名称">
                <el-input v-model="formData.name" disabled />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="formData.companyArea" disabled />
              </el-form-item>
              <el-form-item label="公司邮箱">
                <el-input v-model="formData.mailbox" disabled />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="formData.remarks" type="textarea" disabled rows="3" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRoleList, delRole } from '@/api/setting.js'
import addRole from '@/views/setting/components/addRole.vue'
export default {
  components: {
    addRole
  },
  data() {
    return {
      activeName: 'duty',
      tableData: [],
      page: {
        total: null,
        pagesize: 5,
        page: 1
      },
      dialogFormVisible: false,
      closable: false,
      formData: {
        name: '江苏传智播客教育科技股份有限公司',
        companyArea: '北京市昌平区建材城西路金燕龙办公楼一层',
        mailbox: 'bd@itcastcn',
        remarks: '传智播客官网-好口碑IT培训机构,一样的教育,不一样的品质'
      }
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {

    // 获取列表
    async getRoleList() {
      // console.log(await getRoleList(this.page))
      const ret = await getRoleList(this.page)
      this.tableData = ret.rows
      this.page.total = ret.total
    },
    // 当前页改变时触发
    handleCurrentChange(val) {
      this.page.page = val
      this.getRoleList()
    },
    // 新增角色
    addBtn() {
      this.dialogFormVisible = true
      this.$refs.addRoleFef.title = '新增角色'
    },
    // 删除角色

    // 问题 删除当前页所有数据 不会跳转到前一页 只会显示无数据 No Data  !!!!!!!!!

    delBtn(id) {
      this.$confirm('确定删除该部门吗?').then(async() => {
        await delRole(id)
        // 如果 当前页数据只剩一条 并且当前页码大于1   删除当前页所有数据  就要跳转到前一页
        if (this.tableData.length === 1 && this.page.page > 1) {
          this.page.page--
        }
        this.getRoleList()
      })
    },

    // 编辑
    editBtn(id) {
      this.dialogFormVisible = true
      // 数据回写
      // 调用子组件方法 获取角色详情
      this.$refs.addRoleFef.getRoledetail(id)
    }
  }
}
</script>

<style scoped>
.addBtn{
  margin-bottom: 30px ;
}
.pagination{
  margin-right: 0px;
}
.el-form{
  margin: 50px 0 0 50px;
  width: 500px;
}
</style>
